<template>
	<view class="change-password-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 应用Logo -->
			<view class="logo-section">
				<view class="app-logo">
					<view class="logo-shape"></view>
				</view>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-section">
				<!-- 新密码输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<u-input
							v-model="formData.newPassword"
							:type="showNewPassword ? 'text' : 'password'"
							placeholder="请输入新密码"
							:border="false"
							:clearable="false"
							class="password-input"
						></u-input>
						<view class="password-toggle" @click="toggleNewPassword">
							<u-icon 
								:name="showNewPassword ? 'eye-off' : 'eye'" 
								size="40" 
								color="#999"
							></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 确认密码输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<u-input
							v-model="formData.confirmPassword"
							:type="showConfirmPassword ? 'text' : 'password'"
							placeholder="请再次输入新密码"
							:border="false"
							:clearable="false"
							class="password-input"
						></u-input>
						<view class="password-toggle" @click="toggleConfirmPassword">
							<u-icon 
								:name="showConfirmPassword ? 'eye-off' : 'eye'" 
								size="40" 
								color="#999"
							></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 确认按钮 -->
				<view class="button-section">
					<u-button
						:loading="loading"
						:disabled="!isFormValid"
						@click="confirmChange"
						class="confirm-button"
					>
						确认修改
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					newPassword: '',
					confirmPassword: ''
				},
				showNewPassword: false,
				showConfirmPassword: false,
				loading: false
			}
		},
		computed: {
			// 表单验证
			isFormValid() {
				return this.formData.newPassword.length >= 6 && 
					   this.formData.confirmPassword.length >= 6 &&
					   this.formData.newPassword === this.formData.confirmPassword;
			}
		},
		methods: {
			// 切换新密码显示/隐藏
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},
			
			// 切换确认密码显示/隐藏
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},
			
			// 确认修改密码
			confirmChange() {
				if (!this.isFormValid) {
					uni.showToast({
						title: '请检查密码输入',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				
				// 模拟API调用
				setTimeout(() => {
					this.loading = false;
					
					// 这里应该调用实际的修改密码API
					// 示例：this.changePasswordAPI();
					
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});
					
					// 清空表单
					this.formData.newPassword = '';
					this.formData.confirmPassword = '';
					
					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					
				}, 2000);
			},
			
			// 实际的修改密码API调用（示例）
			async changePasswordAPI() {
				try {
					// 这里替换为实际的API调用
					// const response = await uni.request({
					//     url: '/api/change-password',
					//     method: 'POST',
					//     data: {
					//         newPassword: this.formData.newPassword
					//     }
					// });
					
					// if (response.data.success) {
					//     return true;
					// } else {
					//     throw new Error(response.data.message);
					// }
				} catch (error) {
					uni.showToast({
						title: error.message || '修改失败，请重试',
						icon: 'none'
					});
					return false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.change-password-container {
	min-height: 100vh;
	background-color: #fff;
	
	.content {
		padding: 120rpx 40rpx 60rpx;
		
		.logo-section {
			display: flex;
			justify-content: center;
			margin-bottom: 80rpx;
			
			.app-logo {
				width: 120rpx;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.logo-shape {
					width: 100rpx;
					height: 100rpx;
					background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
					border-radius: 20rpx;
					position: relative;
					transform: rotate(45deg);
					
					&::before {
						content: '';
						position: absolute;
						top: 20%;
						left: 20%;
						width: 60%;
						height: 60%;
						background: linear-gradient(135deg, #7BB3F0 0%, #A8D1F0 100%);
						border-radius: 10rpx;
						transform: rotate(-45deg);
					}
				}
			}
		}
		
		.form-section {
			.input-group {
				margin-bottom: 40rpx;
				
				.input-wrapper {
					position: relative;
					background-color: #f8f9fa;
					border-radius: 16rpx;
					padding: 0 20rpx;
					border: 2rpx solid #e9ecef;
					
					&:focus-within {
						border-color: #4A90E2;
						background-color: #fff;
					}
					
					.password-input {
						height: 100rpx;
						
						:deep(.u-input__input) {
							height: 100rpx;
							font-size: 32rpx;
							color: #333;
						}
						
						:deep(.u-input__placeholder) {
							color: #999;
							font-size: 32rpx;
						}
					}
					
					.password-toggle {
						position: absolute;
						right: 20rpx;
						top: 50%;
						transform: translateY(-50%);
						z-index: 10;
						padding: 10rpx;
					}
				}
			}
			
			.button-section {
				margin-top: 60rpx;
				
				.confirm-button {
					width: 100%;
					height: 100rpx;
					background: linear-gradient(135deg, #FF4757 0%, #FF6B7A 100%);
					border-radius: 16rpx;
					border: none;
					
					:deep(.u-button__text) {
						font-size: 36rpx;
						font-weight: 600;
						color: #fff;
					}
					
					&:disabled {
						background: #ccc;
						
						:deep(.u-button__text) {
							color: #999;
						}
					}
				}
			}
		}
	}
}
</style> 